<template>
	<view class="gift-list" :style="{
    padding: `${params.padding_y || 0}rpx ${params.padding_x || 30}rpx`
  }">
		<view class="gift-card" v-for="(gift, index) in data" :key="index">
			<view class="gift-card-content" :style="{
        background: params.bg_gradient || 'linear-gradient(to right, #fee8c7, #fefbf0)'
      }">
				<view class="gift-name" :style="{
          fontSize: `${params.fontsize1 || 32}rpx`,
          color: params.color1 || '#64380b'
        }">{{ gift.name || gift.title1 }}</view>
				<view class="gift-desc" :style="{
          fontSize: `${params.fontsize2 || 26}rpx`,
          color: params.color2 || '#64380b'
        }">{{ gift.description || gift.title2 }}</view>
			</view>

			<view class="gift-image-container">
				<image class="gift-image" :src="gift.image || gift.imgurl" mode="aspectFill"></image>
				<view class="gift-badge" v-if="gift.badge" :style="{
          backgroundColor: params.badge_bgcolor || '#0d7a62',
          color: params.badge_color || '#ffffff'
        }">
					{{ gift.badge }}
				</view>
			</view>

			<view class="gift-info">
				<view class="gift-price-action">
					<view class="gift-price"><text style="font-size: 12px">¥</text>{{ gift.price }}</view>
					<view class="btn-item" @tap="buydialogChange" data-btntype="3">
						<image class="btn-item-img"
							src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250308/fbaf6b6d4eb6b2a0881f76172e0bcabd.png" />
						<view class="btn-item-text">送礼</view>
					</view>
				</view>
			</view>
			<buydialog v-if="buydialogShow" :proid="proid" @buydialogChange="buydialogChange" :menuindex="menuindex">
			</buydialog>
		</view>
	</view>
</template>

<script>
	export default {
		name: "DpGiftList",
		props: {
			params: {
				type: Object,
				default: () => ({})
			},
			data: {
				type: Array,
				default: () => [{
						name: "鲜炖燕窝",
						description: "鲜炖技术 开盖即食232g*6瓶/盒",
						price: "1380",
						image: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg",
					},
					{
						name: "精选鲜活进口加拿大龙虾",
						description: "来自加拿大龙士家龙虾",
						price: "899",
						image: "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250122/93299d99a47f624b41090728314de9a9.jpg",
					},
				]
			},
			menuindex: {
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				buydialogShow: false,
				proid: '', // 当前商品ID
			
				currentGift: null // 当前选中的礼物
			}
		},
		methods: {
			handleGiftClick(e) {
				const {
					btntype,
					index
				} = e.currentTarget.dataset;
				const gift = this.data[index];

				this.$emit('giftClick', {
					gift,
					btntype,
					menuindex: this.menuindex
				});
			},
			buydialogChange: function (e) {
				if (!this.buydialogShow) {
					this.proid = e.currentTarget.dataset.proid
				}
				this.buydialogShow = !this.buydialogShow;
			},
		}
	};
</script>

<style scoped>
	.gift-list {
		padding: 0 30rpx;
	}

	.gift-card {
		background: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.gift-card-content {
		background: linear-gradient(to right, #fee8c7, #fefbf0);
		padding: 20rpx;
	}

	.gift-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #64380b;
		margin-bottom: 10rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
	}

	.gift-desc {
		font-size: 26rpx;
		color: #64380b;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
	}

	.gift-image-container {
		position: relative;
		padding: 20rpx;
	}

	.gift-image {
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
	}

	.gift-badge {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		background: #0d7a62;
		color: #ffffff;
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		font-weight: bold;
	}

	.gift-info {
		padding: 0rpx 20rpx 20rpx 20rpx;
	}

	.gift-price-action {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.gift-price {
		color: #ff5733;
		font-size: 36rpx;
		font-weight: bold;
	}

	.btn-item {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 36rpx;
		background-color: #fff7e6;
		width: 160rpx;
		height: 78rpx;
	}

	.btn-item-img {
		width: 40rpx;
		height: 40rpx;
	}

	.btn-item-text {
		font-size: 30rpx;
		font-weight: 700;
		color: #ac5300;
	}
</style>